<div class="track-list-item"
     appDraggable
     [dragData]="track"
     [dragImageUrl]="track.image.getSmallSizeUrl()"
     dragEffect="copy"
     (click)="track.selectable.toggleSelect()">
  <div class="cover">
    <app-track-cover [track]="track" [size]="getSize()"></app-track-cover>
    <app-track-play-button [track]="track" [tracks]="tracks"></app-track-play-button>
  </div>
  <div class="details">
    <div class="track-info">
      <app-toggle-liked-track [track]="track"></app-toggle-liked-track>
      <div class="meta"
           appTrackPlayOn="click"
           [track]="track"
           [tracks]="tracks">
        <b class="track-title">
          <i class="fa fa-bars drag-indicator hidden-xs"></i>
          {{track.title}}
        </b>
        <div class="artist">
          <span>{{track.artist.getFullName()}}</span>
          <span class="created">created
              <span [appTimeAgo]="track.createdAt">{{track.createdAt}}</span>
          </span>
        </div>
      </div>
      <div class="btn-holder">
        <div *ngIf="!isQueued()"
             class="btn btn-xs btn-default queue-btn"
             (click)="addToQueue(track)">
          <span class="fa fa-queue"></span>
        </div>
        <div *ngIf="isQueued()"
             class="btn btn-xs btn-default is-queued queue-btn"
             (click)="removeFromQueue(track)">
          <i class="fa fa-queue"></i>
          <i class="fa fa-trash"></i>
        </div>
        <ng-content></ng-content>
      </div>
    </div>
    <div class="stats">
      <a class="label label-default label-light"
         [href]="track.externalLink"
         target="_blank"
         title="Open in {{providerMap[track.provider].title}}">
        <span class="{{providerMap[track.provider].icon}}"></span>
      </a>
      <div class="duration label label-default label-light">
        <i class="fa fa-clock-o" aria-hidden="true" alt="play count"></i>
        <span *ngIf="track.duration">
            {{track.duration | hReadableSeconds}}
          </span>
        <span *ngIf="!track.duration">
            <app-loading-spinner [isLoading]="true"></app-loading-spinner>
          </span>
      </div>
      <div *ngIf="track.likes"
           class="favs label label-default label-light">
        <i class="fa fa-heart" aria-hidden="true" alt="favouites count"></i> {{track.likes | kMilShortener}}
      </div>
      <div *ngIf="track.clicks"
           class="plays label label-default label-light">
        <i class="fa fa-play-circle" aria-hidden="true" alt="play count"></i> {{track.clicks | kMilShortener}}
      </div>
      <div *ngIf="track.genre && track.genre.length>0"
           class="genre label label-default label-light"
           title="Track category">
        <i class="fa fa-dot-circle-o" aria-hidden="true" alt="genre"></i>
        {{track.getGenreString()}}
      </div>
    </div>
  </div>
</div>
